$(function () {
  const layer = layui.layer
  // 1.获得URL地址中的携带的id
  const id = location.search.substring(4)
  // console.log(id)

  // 2.获取菜单详情函数
  getParticulars()
  function getParticulars(){
    $.ajax({
      method:'GET',
      url:`http://124.223.14.236:3001/api/recipe/${id}`,
      success:function(res){
        // console.log(res)
        if(!res.success) return layer.msg('获取菜单详情失败')
        // 渲染到DOM中
        $('#image').attr('src',`http://124.223.14.236:3001/public/${res.data.img}`)
        $('.right h3').html(res.data.name)
        $('.right p').html(res.data.description)
      }
    })
  }

  // 3.渲染更多美食列表
  getMoreLise()
  function getMoreLise() {
    $.ajax({
      method:'GET',
      url:'http://124.223.14.236:3001/api/recipeInfo',
      data:{
        recipe_id:id
      },
      success:function(res){
        if (!res.success) return layer.msg('获取更多美食失败')
        
        // 判断res.data是否是空，如果是H5为空
        if(res.data.length === 0) {
          $('.right h5').html('')
          document.querySelector('body').innerHTML += `<p class="noinfo">没有美食哦...</p>`
        }
        render(res.data)
      }
    })
  }

  // 4.渲染更多美食
  function render(data) {
    let str = ''
    data.forEach(item => {
      const { id , title , img} = item
      str += `
        <li>
          <a href="detail.html?id=${id}">
            <img src="http://124.223.14.236:3001/public/${img}" alt="" />
            <h3>${title}</h3>
          </a>
         </li>
      `
    })

    $('.list-box').html(str)
  }
})